<template>
  <view class="app">
    <view class="back-btn mix-icon icon-xiangzuo" @click="navBack"></view>
    <view class="page-tip">帮助中心</view>
    <view class="top">
      <view class="title-wapper row">
        <view class="item-panel column">
          <view class="title">Hi～，有什么可以帮您</view>
          <view class="desc">在线客服为您服务</view>
        </view>
        <image class="item-img" src="/static/help.png" mode="aspectFit"></image>
      </view>
      <view class="help-wapper">
        <view class="item-help">1 如何使用设备进行提前还款？</view>
        <view class="item-help">2 手机连不上设备，长时间收不到货怎么办</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    navBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style>
page {
  background: #f7f8f9;
}
</style>
<style scoped lang="scss">
.app {
  padding-top: calc(var(--status-bar-height) + 40rpx);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url('../../static/page_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 600rpx;
}
.back-btn {
  position: absolute;
  left: 20rpx;
  top: calc(var(--status-bar-height) + 20rpx);
  z-index: 90;
  padding: 20rpx;
  font-size: 34rpx;
  color: white;
}
.page-tip {
  position: absolute;
  left: 50%;
  top: calc(var(--status-bar-height) + 40rpx);
  z-index: 90;
  margin-left: -40rpx;
  font-size: 34rpx;
  color: white;
  line-height: 34rpx;
}
.top {
  position: relative;
  overflow: hidden;
  // padding-top: calc(var(--status-bar-height) + 52rpx);
  .title-wapper {
    .item-panel {
      margin: 80rpx auto 0;
      padding-left: 20rpx;
      .title {
        font-size: 46rpx;
        color: #ffffff;
      }
      .desc {
        padding-top: 10rpx;
        font-size: 36rpx;
        color: #ffffff;
      }
    }
    .item-img {
      position: relative;
      top: 46rpx;
      left: -30rpx;
      width: 200rpx;
      height: 200rpx;
    }
  }
}
.help-wapper {
  width: 700rpx;
  margin: 20rpx auto 0;
  background: #fff;
  border-radius: 10rpx;
  padding: 20rpx 30rpx;
}
</style>
